<template>
  <section>
    <sel-com-dep v-on:get="getListBtn"></sel-com-dep>
    <el-row v-if="currDepartment">
      <el-table :data="couponList">
        <el-table-column label="序号" type="index"></el-table-column>
        <el-table-column label="名称" prop="name" width="150px">
          <template slot-scope="scope">
            <el-input v-show="scope.row.edit" size="mini" v-model="scope.row.name"></el-input>
            <span  v-show="!scope.row.edit">{{scope.row.name}}</span>
          </template>
        </el-table-column>
        <el-table-column label="SN" prop="sn" width="150px">
          <template slot-scope="scope">
            <span v-show="scope.row.sn">{{scope.row.sn}}</span>
            <el-button v-show="!scope.row.sn" size="mini" type="text" @click="setSnBtn(scope.row)">SET</el-button>
          </template>
        </el-table-column>
        <el-table-column label="起止时间" width="265px">
          <template slot-scope="scope">
            <span style="font-size: 12px">{{formatDate(scope.row.couponDefine.start)}} - {{formatDate(scope.row.couponDefine.end)}}</span>
          </template>
        </el-table-column>
        <el-table-column label="状态">
          <template slot-scope="scope">
            <div v-if="scope.row.state === '2'">已使用</div>
            <div v-if="scope.row.expired">已过期</div>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="230" fixed="right">
          <template slot-scope="scope">
            <el-button :type="scope.row.edit?'success':'primary'" @click='confirm(scope.row)' size="mini" icon="edit">{{scope.row.edit?'完成':'编辑'}}</el-button>
            <el-button @click='cancelBtn(scope.row)' size="mini" v-if="scope.row.edit">取消</el-button>
            <el-button @click='del(scope)' size="mini" v-if="!scope.row.edit">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-row>
    <el-pagination v-show="totalPage>0" style="margin-top:20px;" background layout="prev, pager, next" :page-count="totalPage" @current-change="goPage"/>
  </section>
</template>

<script>
  import selComDep from '../selComDep'
  import {mapGetters, mapActions, mapMutations} from 'vuex'
  import Vue from 'vue'//后续添加属性，需要vue联动
  import dateFormater from '@/common/date-formater'
  import errHandler from '@/assets/errHandler'
  export default {
    name: "couponList",
    components: {selComDep},
    data() {
      return {
        totalPage:0,
        couponList:null,
        currDepartment:null
      }
    },
    created(){
      //获取优惠券列表
      // this.getCouponList()
    },
    computed:{
    },
    watch: {
    },
    methods: {
      ...mapActions({
        fetch: 'fetch'
      }),
      formatDate(d){
        return dateFormater.formatDatetime(d)
      },
      goPage(val){
        this.loading=true
        this.getCouponList(val-1)
      },
      getListBtn(e){
        console.log(e)
        this.currDepartment=e
        this.getCouponList()
      },
      getCouponList(pageNo){
        this.fetch({name:"getCouponList",data:{page:pageNo?pageNo:0,departmentId:this.currDepartment.id}})
          .then(res=>{
            console.log(res)
            this.couponList=res.content
            this.totalPage=res.totalPages
          })
          .catch(err=>{
            console.log(err)
            errHandler.handle(this,err)
          })
      },
      setSnBtn(row){
        console.log(row)
        this.addSnOfCoupon(row)
      },
      addSnOfCoupon(row){
        this.fetch({name:"addSnOfCoupon",data:{id:row.id}})
          .then(res=>{
            console.log(res)
            row.sn=res.sn
          })
          .catch(err=>{
            console.log(err)
            errHandler.handle(this,err)
          })
      },
      confirm(row){
        console.log(row)
        if(row.edit === undefined){
          Vue.set(row,'edit',true)//后续添加属性，需要vue联动
          return
        }
        if(row.edit){
          this.loading=true
          this.updateCoupon(row)
        }else {
          row.edit=true
        }
      },
      updateCoupon(row){
        this.fetch({name:"updateCoupon",data:{...row}})
          .then(res=>{
            console.log(res)
            row.edit=false
          })
          .catch(err=>{
            console.log(err)
            errHandler.handle(this,err)
          })
      },
      cancelBtn(row){//取消按钮
        if(row.edit === undefined){
          Vue.set(row,'edit',false)//后续添加属性，需要vue联动
        }else {
          row.edit =false
        }
      },
      del(scope){//删除按钮
        this.$confirm('确认删除？')
          .then(()=> {
            this.fetch({name:"delCoupon",data:{id:scope.row.id}})
              .then(res=>{
                console.log(res)
                this.couponList.splice(scope.$index,1)
              })
              .catch(err=>{
                console.log(err)
                errHandler.handle(this,err)
              })
          })
          .catch(() => {
            this.$message({
              type: 'info',
              message: '已取消删除'
            })
          })
      },
    }
  }
</script>

<style scoped>

</style>
